import React, { useState, useCallback } from 'react';
import { Select } from 'antd';
import Icon from '@ant-design/icons';
import * as icons from '@ant-design/icons';

type SelectIconProps = {
  placeholder?: string;
  setValue: React.Dispatch<React.SetStateAction<any>>;
  iconStyle?: React.CSSProperties;
  mode?: string;
};

const SelectIcon: React.FC<SelectIconProps> = ({
  placeholder = '请选择图标',
  setValue,
  iconStyle,
  mode,
  ...rest
}) => {
  const iconList = Object.keys(icons).filter(
    (item) => typeof icons[item as keyof typeof icons] === 'object' && item !== 'default',
  );

  const [defaultValue, setDefaultValue] = useState<any[]>([]);

  const onSelect = useCallback(
    (value: any) => {
      const newValue = mode === 'multiline' ? value : [...defaultValue, value];
      setDefaultValue(newValue);
      setValue(newValue);
    },
    [defaultValue, mode, setValue],
  );

  return (
    <Select
      onSelect={onSelect}
      value={defaultValue}
      placeholder={placeholder}
      showSearch
      allowClear
      optionLabelProp="children"
      mode={mode as 'multiple' | 'tags' | undefined}
      style={{ width: '100%' }}
      {...rest}>
      {iconList.map((item) => (
        <Select.Option value={item} key={item}>
          <Icon component={icons[item]} style={{ marginRight: '8px', ...iconStyle }} />
          {item}
        </Select.Option>
      ))}
    </Select>
  );
};

export default SelectIcon;
